/*
 * @Author: hua
 * @Date: 2020-03-08 09:47:43
 * @description:
 * @LastEditors: hua
 * @LastEditTime: 2020-04-08 09:28:00
 */
import * as React from 'react';
import {useState, useEffect} from 'react';
import {View, Text, Image, StyleSheet, Alert} from 'react-native';
import {Button} from 'react-native-elements';
import I18n from '../i18n';

export default function HomeScreen({navigation}) {
  const [count, setCount] = useState(0);
  const users = [
    {
      name: 'brynn',
      avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/brynn/128.jpg',
    },
  ];
  useEffect(() => {
    /* store仓库
    store.subscribe(()=>{
      console.log(store.getState().message);
      setCount(store.getState().message)
    }); */
    /* 
    //异步请求
    axios.get("http://www.baidu.com").then(res=>{
      console.log(res);
    }) */
    /* //持久化存储
    DeviceStorage.save("tel", "1");
    DeviceStorage.get('tel').then((tel) => {
      if (tel !== null || tel !== '') {
        console.log(tel);
      }
    })
    //验证
    var approve = require('approvejs');
    var rules = {
      required: true,
      email: true
    };
    var result = approve.value('userdomain.com', rules);
    console.log(result) */
    /* 提示框
    Toast.show('This is a message', {
      duration: Toast.durations.LONG,
      position: Toast.positions.CENTER
    });
    Alert.alert(
      'Alert Title',
      'My Alert Msg',
      [
        {text: 'Ask me later', onPress: () => console.log('Ask me later pressed')},
        {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
        {text: 'OK', onPress: () => console.log('OK Pressed')},
      ],
      { cancelable: false }
    ) */
  });
  return (
    <View style={styles.container}>
      <View style={styles.btn_container}>
        <Button
          buttonStyle={styles.btn}
          title={I18n.t('register')}
          onPress={() => navigation.navigate('RegisterScreen')}
        />
        <Button
          buttonStyle={styles.btn}
          title={I18n.t('login')}
          type="outline"
          onPress={() => navigation.navigate('LoginScreen')}
        />

        <Button
          buttonStyle={styles.btn}
          title={I18n.t('pcbBindBattery')}
          type="outline"
        />
      </View>
      <View style={styles.btn_container}>
        <Button
          buttonStyle={styles.btn}
          title={I18n.t('batteryBindShell')}
          type="outline"
        />
        <Button
          buttonStyle={styles.btn}
          title={I18n.t('shellBindPackage')}
          type="outline"
        />

        <Button
          buttonStyle={styles.btn}
          title="Outline button"
          type="outline"
        />
      </View>
      <View style={styles.btn_container}>
        <Button
          buttonStyle={styles.btn}
          title="Outline button"
          type="outline"
        />
        <Button
          buttonStyle={styles.btn}
          title="Outline button"
          type="outline"
        />

        <Button
          buttonStyle={styles.btn}
          title="Outline button"
          type="outline"
        />
      </View>
      <View style={styles.describe_container}>
        <Text>
          一些描述文字一些描述文字一些描述文字一些描述文字一些描述文字一些描述文字
        </Text>
      </View>
      <Image
        source={require('../assets/images/splash.png')}
        style={styles.imageStyle}
      />
      {/* <Text>Home Screen{count}</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('SettingScreen')}
      />
      <Icon
        name='g-translate'
        color='#00aced' />
      <View style={styles.viewStyle}>
        <Text style={styles.iconStyle}>icomoon引用:</Text>
        <Text style={styles.iconStyle}>{'\ue602'}</Text>
        <Text style={styles.iconStyle}>{'\ue60e'}</Text>
      </View>
      <Card title="CARD WITH DIVIDER">
        {
          users.map((u, i) => {
            return (
              <View key={i} >
                <Image

                  resizeMode="cover"
                  source={{ uri: u.avatar }}
                />
                <Text >{u.name}</Text>
              </View>
            );
          })
        }
      </Card> */}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: '100%',
  },
  btn_container: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    padding: 10,
  },
  btn: {
    height: 50,
    width: 100,
  },
  describe_container: {
    display: 'flex',
    flexDirection: 'row',
    padding: 10,
    marginTop: 10,
  },
  imageStyle: {
    position: 'absolute',
    bottom: 20,
    left: '50%',
    marginLeft: -55,
  },
  viewStyle: {
    flexDirection: 'row',
    marginTop: 10,
  },
  iconStyle: {
    fontFamily: 'icomoon',
    fontSize: 24,
    marginTop: 10,
    marginLeft: 10,
  },
  svgStyle: {
    marginTop: 10,
    marginLeft: 30,
  },
});
